<template>
  <div>
    <a-space
      direction="vertical"
      :size="20"
    >
      <a-date-picker v-model:value="value1" />
      <a-date-picker
        v-model:value="value2"
        picker="week"
      />
      <a-date-picker
        v-model:value="value3"
        picker="month"
      />
      <a-date-picker
        v-model:value="value4"
        picker="quarter"
      />
      <a-date-picker
        v-model:value="value5"
        picker="year"
      />
    </a-space>
  </div>
  <a-divider></a-divider>
  <a-space
    direction="vertical"
    :size="12"
  >
    555
    <a-date-picker
      status="error"
      placement="topRight"
      placeholder="Select Time"
      show-time
      v-model:value="value11"
      format="YYYY/MM/DD HH:mm:ss"
    />
    <a-range-picker
      v-model:value="value22"
      show-time
      disabled
    />
    <a-range-picker
      v-model:value="value33"
      picker="week"
    />
    <a-range-picker
      v-model:value="value44"
      picker="month"
    />
    <a-range-picker
      v-model:value="value55"
      picker="year"
      :bordered="false"
    />
  </a-space>

  <a-divider>444</a-divider>
  <a-date-picker
    v-model:value="value111"
    format="YYYY-MM-DD HH:mm:ss"
    :disabled-date="disabledDate"
    :presets="presets"
  >
    <template #dateRender="{ current }">
      <div
        class="ant-picker-cell-inner"
        :style="getCurrentStyle(current)"
      >
        {{ current.date() }}
      </div>
    </template>
  </a-date-picker>
  <hr>
  <a-range-picker
    size="small"
    :value="hackValue || value11111"
    :disabled-date="disabledDate1"
    @change="onChange1"
    @openChange="onOpenChange1"
    @calendarChange="onCalendarChange1"
  >
    <template #renderExtraFooter>这里是 额外的页脚</template>
  </a-range-picker>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: '',
  components: {},
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',

      value11: '',
      value22: [],
      value33: [],
      value44: [],
      value55: [],


      value111: '',


      hackValue: '',
      value11111: '',
      dates: '',


      presets: [
        {
          label: 'Yesterday',
          value: dayjs().add(-1, 'd'),
        },
        {
          label: 'Last Week',
          value: dayjs().add(-7, 'd'),
        },
        {
          label: 'Last Month',
          value: dayjs().add(-1, 'month'),
        },
      ]



    }
  },
  created() { },
  mounted() { },
  methods: {
    disabledDate(current) {
      return current && current < dayjs().endOf('day')
    },


    disabledDate1(current) {
      if (!this.dates || this.dates.length === 0) {
        return false;
      }
      const tooLate = this.dates[0] && current.diff(this.dates[0], 'days') > 7;
      const tooEarly = this.dates[1] && this.dates[1].diff(current, 'days') > 7;
      return tooEarly || tooLate;
    },
    onOpenChange1(open) {
      if (open) {
        this.dates = [];
        this.hackValue = [];
      } else {
        this.hackValue = undefined;
      }
    },
    onChange1(val) {
      this.value11111 = val;
    },
    onCalendarChange1(val) {
      this.dates = val;
    },
    getCurrentStyle(current) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    }


  },

  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
